<template>
  <PageWrapper dense>
    <BasicTable @register="registerTable">
      <template #extra>
        <Row class="justify-centetr">
          <Col :span="8">
          <div class="p-2 flex flex-col items-center">
            <span class="font-size-16px font-600 mb-8px">已付款金额</span>
            <CountTo prefix="¥" :startVal="0" :endVal="0" :decimals="2" />
          </div>
          </Col>
          <Col :span="8">
          <div class="p-2 flex flex-col items-center">
            <span class="font-size-16px font-600 mb-8px">待付款金额</span>
            <CountTo prefix="¥" :startVal="0" :endVal="0" :decimals="2" />
          </div>
          </Col>
          <Col :span="8">
          <div class="p-2 flex flex-col items-center">
            <span class="font-size-16px font-600 mb-8px">付款比例</span>
            <CountTo suffix="%" :startVal="0" :endVal="0" :decimals="2" />
          </div>
          </Col>
        </Row>
      </template>
      <template #toolbar>
        <Button type="primary">付退款</Button>
      </template>
    </BasicTable>
  </PageWrapper>
</template>

<script setup lang="ts">
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable } from '@/components/Table';
import { listProduct } from '@/api/product';
import { columns } from './relevantInformation.data';
import { Button, Row, Col } from 'ant-design-vue';
import { CountTo } from '@/components/CountTo';
defineOptions({ name: 'RelevantInformation' });
const [registerTable, { reload }] = useTable({
  title: '付款列表',
  api: listProduct,
  showIndexColumn: true,
  rowKey: 'id',
  useSearchForm: false,
  columns: columns,
});
// reload();
</script>

<style scoped></style>
